<template>
  <list-detail-layout :col-props="{md:[18,6]}">
    <template #detailMain>
      <formal-profile-details-main :vehicleId="vehicleId" :vin="vin" :openType="openType"></formal-profile-details-main>
    </template>
    <template #detailRight>
      <car-model-base-info :vin="vin" :openType="openType"></car-model-base-info>
      <car-model-config-file :vin="vin"></car-model-config-file>
    </template>
  </list-detail-layout>
</template>
<script>
import ListDetailLayout from '@/views/components/ListDetailLayout'
import CarModelBaseInfo from './CarModelBaseInfo'
import formalProfileDetailsMain from './formalProfileDetailsMain.vue'
import CarModelConfigFile from './CarModelConfigFile'
export default {
  components: {
    formalProfileDetailsMain,
    CarModelBaseInfo,
    ListDetailLayout,
    CarModelConfigFile
  },
  props: {
    vehicleId: {
      type: String,
      default: ''
    },
    vin: {
      type: String,
      default: ''
    },
    openType: {
      type: String,
      default: ''
    }
  },
  computed: {
  },
  data () {
    return {
    }
  },
  methods: {
    getVehicleDetail () {
      if (!this.vin) {
        return
      }
      this.$store.dispatch('getVehicleInfoData', { vin: this.vin }).then().catch((err) => {
        console.log(err)
      })
    }
  },
  mounted () {
    this.getVehicleDetail()
  }
}
</script>
<style lang="less" scoped>
.carModelDetailComp {
  flex:1 0 0;
  overflow:hidden;
  display: flex;
  flex-direction: column;
  .carModelDetailCompMain {
    flex:1 0 0;
    border-bottom:1px solid @borderColor;
    border-top:1px solid @borderColor;
    overflow:hidden;
  }
  .carModelDetailCompFooter {
    flex:none;
    padding:15px 24px 15px 24px;
  }
  .carModelDetailLeft {
    overflow: auto;
    padding:24px;
  }
  .carModelDetailRight {
    border-left:1px solid @borderColor;
    overflow: auto;
    padding:24px;
  }
}
</style>
